<template>
    <div id="signin">
       <div class="cover">
           <div id="leftPanel">
               <div id="leftTop">
                   <div class="circle"></div>
                   <div class="circle"></div>
                   <div class="circle"></div>
               </div>
               <div id="leftBottom">
                   <ul>
                       <li>
                            <i class="fa fa-camera-retro"></i>
                            <span>彩票资讯</span>
                       </li>
                       <li>
                           <i class="fa fa-university" aria-hidden="true"></i>
                           <span>彩票管理</span>
                       </li>
                       <li>
                           <i class="fa fa-cog" aria-hidden="true"></i>
                           <span>彩票工具</span>
                       </li>
                       <li>
                           <i class="fa fa-bar-chart" aria-hidden="true"></i>
                           <span>数据图表</span>
                       </li>
                   </ul>
               </div>
           </div>
           <div id="rightPanel">
               <el-form :model='userInfo' :rules="rules" ref="userInfo">
                  <ul>
                      <li style="font-size:40px;color:white">
                        可米彩票
                      </li>
                      <li style="width:80%">
                        <el-form-item prop="accountName">
                            <el-input placeholder="请输入用户名" class="userInput" v-model="userInfo.accountName" />
                        </el-form-item>
                      </li>
                      <li style="width:80%">
                          <el-form-item prop="password">
                              <el-input placeholder="请输入密码" type="password" class="userInput" v-model="userInfo.password" />
                          </el-form-item>
                      </li>
                      <li style="text-align:center; padding-left:0px">
                           <el-switch
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            v-model="remember"
                            >
                            </el-switch>
                            <span style="color:white; margin-left:10px">记住密码</span>
                      </li>
                      <li>
                          <el-button type="primary" style="width:100%" @click="signin">登录</el-button>
                      </li>
                  </ul>
               </el-form> 
           </div>
       </div>
    </div>
</template>
<script>
export default {
    data(){ 
        return {
            userInfo:{},
            rules:{
                accountName:[
                    {required:true,message:'用户名不能为空',trigger:'blur'},
                    {min:2,max:20,message:'字符长度不能少于2',trigger:'blur'}
                ],
                password:[
                    {required:true,message:"密码不能为空",trigger:'blur'},
                    {min:5,max:12,message:'字符长度不能少于5',trigger:'blur'}
                ]
            },
            remember:true
        }
    },
    methods:{
        signin(){
            this.$refs['userInfo'].validate((valid)=>{
                if(valid){
                    this.$http.post(this.$apis.Signin,this.userInfo).
                    then((resp)=>{
                        if(resp.data.success){
                            localStorage.setItem('remember',this.remember);
                            localStorage.setItem('token',resp.data.token);
                            localStorage.setItem('response',JSON.stringify(resp.data.response));
                            if(this.$route.query.redirect){
                                this.$router.push(this.$route.query.redirect);
                            }else{
                                this.$router.push('/Home')
                            }
                        }else{
                            this.$message.error("登录失败，请从新登录")
                        }
                    })
                }else{
                    console.log("还有未通过验证的，请注意");
                    return false;
                }
            })
        }
    }
   
}
</script>
<style lang="scss" >
    #signin {
        width: 100%;
        height: 100%;
        background: url(../../utils/images.jpg) ;
        background-size: cover;
        .cover{
            width: 100%;
            height:100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: row;
            #leftPanel{
                width:70%;
                height: 100%;
                #leftTop {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .circle {
                        width: 200px;
                        height: 200px;
                        border-radius: 50%;
                        &:nth-child(1){
                            position:absolute;
                            top: 20%;
                            background: rgba(240, 197, 158, .3);

                        }
                        &:nth-child(2){
                            position:absolute;
                            top: 35%;
                            left:33%;
                            background: rgba(85,212,191,.3)
                        }
                        &:nth-child(3){
                            position: absolute;
                            top: 35%;
                            left: 23%;
                            background: rgba(82,89,197,.3)
                        }
                    }
                }
                #leftBottom {
                    width: 100%;
                    height: 100%;
                    ul {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        li {
                            margin-left: 80px;
                            display: flex;
                            flex-direction: column;
                            color: rgba(255,255,255,.3);
                            span {
                                margin-top:20px;
                                text-align: center;
                            }
                            i {
                                font-size: 60px;
                            }
                        }
                    }
                }
            }
            #rightPanel {
                width: 30%;
                height: 100%;
                background: rgba($color: #000000, $alpha: .7);
                ul {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center;
                    li {
                        text-align: center;
                        margin-bottom: 20px;
                        width: 80%;
                        .userInput {
                            width: 100%;
                            text-align: center;
                            .el-input__inner {
                                background: rgba($color: #000000, $alpha: 0);
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
